<!-- 宿舍楼信息 -->
<template>
  <div class="dormitoryInfo-container">
    <Loading v-if="props.Loading"></Loading>
    <div class="dormitory" v-else>
      <p class="title">宿舍楼管理员</p>
     
      <div v-if="props.dormitory.AdminInfon">
        <div class="avatar">
          <Avatar :url="props.dormitory.AdminInfon.avatar" :size="60"></Avatar>
        </div>
        <div class="basicInfo">
          <p class="name">管理员: {{ props.dormitory.AdminInfon.Nickname }}</p>
          <p class="adminId">工号: {{ props.dormitory.AdminInfon.adminId }}</p>
        </div>
      </div>
      <div v-else class="unavailable">
        暂无
      </div>
      <p class="title">宿舍楼信息</p>
      <div class="other">
        <p><span>宿舍楼名称</span>: {{ props.dormitory.DormitoryName }}</p>
        <p class="capacity">
          <span>可住人数</span>: {{ props.dormitory.dormitoryCapacity }}人
        </p>
        <p class="resided">
          <span>以住人数</span>: {{ props.dormitory.dormitoryresided }}人
        </p>
        <p class="floorNum">
          <span>楼层数</span>: {{ props.dormitory.floorNum }}层
        </p>
        <p><span>价格</span>: {{ props.dormitory.RoomRate.price }}元</p>
        <p><span>几人间</span>: {{ props.dormitory.fewPeople }}人</p>
        <p><span>每层房间数</span>: {{ props.dormitory.roomNum }}间</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Avatar from "@/components/Avatar/index.vue";
import Loading from "@/components/Loading/index.vue";
const props = defineProps({
  dormitory: {
    type: Object,
    required: true,
  },
  Loading: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.dormitoryInfo-container {
  width: 100%;
  height: 100%;
  position: relative;
  .dormitory {
    p {
      color: @gray;
      margin: 5px 0;
    }
    .title {
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
    }
    .avatar {
      margin-bottom: 10px;
      .avatar-container {
        margin: 0 auto;
      }
    }
    .basicInfo {
      display: flex;
      justify-content: space-around;
    }
    .other {
      padding: 0 5px;
      span {
        display: inline-block;
        width: 80px;
        text-align-last: justify;
        text-align: justify;
        text-justify: distribute;
      }
    }
  }
}
.unavailable{
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 1em;
  color: @gray;
}
</style>